<template>
  <div>
    <el-form ref="editPram" :model="editPram" label-width="130px">
      <el-form-item label="权限名称" prop="name"
        :rules="[{ required: true, message: '请输入名称', trigger: ['blur', 'change'] }]">
        <el-input v-model="editPram.name" placeholder="分类名称" clearable />
      </el-form-item>
      <el-form-item label="类型" prop="type" :rules="[{ required: true, message: '请选择类型', trigger: 'change' }]">
        <el-select v-model="editPram.type" style="width:100%" placeholder="请选择类型" @change="(value)=>{value==2?editPram.status=0:editPram.status=1}">
          <el-option :value="0" label="目录"></el-option>
          <el-option :value="1" label="菜单"></el-option>
          <el-option :value="2" label="按钮"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="URL">
        <el-input v-model="editPram.path" placeholder="请输入URL" clearable />
      </el-form-item>
      <el-form-item label="权限">
        <el-input v-model="editPram.permission" placeholder="请输入权限" clearable />
      </el-form-item>
      <el-form-item  v-if="(editPram.type==2)" label="按钮key">
          <el-input  v-model="editPram.component" placeholder="补充内容" clearable />
      </el-form-item>
      <el-form-item label="父级">
        <el-cascader v-model="editPram.pid" clearable :options="allTreeList" :props="categoryProps" style="width:100%"
          placeholder="选择父级" />
      </el-form-item>
      <el-form-item label="菜单图标">
        <el-input placeholder="请选择菜单图标" v-model="editPram.icon" clearable>
          <el-button slot="append" icon="el-icon-circle-plus-outline" @click="addIcon"></el-button>
        </el-input>
      </el-form-item>
      <el-form-item label="排序">
        <el-input-number v-model="editPram.sort" :min="0" :max="1000"/>
      </el-form-item>
      <el-form-item label="状态">
        <el-switch v-model="editPram.status" active-text="显示" inactive-text="隐藏" :active-value="1" :inactive-value="0" :disabled="editPram.type==2"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" :loading="loading" @click="handlerSubmit('editPram')">确定</el-button>
        <el-button @click="close">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<!--创建和编辑公用一个组件-->
<script>
import * as categoryApi from '@/api/categoryApi.js'
import {addTreeListdisabled} from '@/utils/ZBKJIutil.js'
import { permissionSave, permissionUpdate } from '@/api/permission.js'
export default {
  // name: "edit"
  props: {
    type: {
      type: Number,
      default: 0
    },
    //父类对象
    prent: {
      type: Object,
      required: true
    },
    //0创建 1 修改
    isCreate: {
      type: Number,
      default: 0
    },
    //菜单对象
    editData: {
      type: Object
    },
    biztype: {
      type: Object,
      required: true
    },
    //父类选择树形表
    allTreeList: {
      type: Array
    }
  },
  data() {
    return {
      loading: false,
      constants: this.$constants,
      editPram: {
        id: 0,
        name: null,
        type: null,
        path: null,
        pid: 0,
        icon: null,
        sort: 0,
        status: 1,
        //type: this.biztype.value,
        belong: 0
      },
      categoryProps: {
        value: 'id',
        label: 'name',
        children: 'children',
        expandTrigger: 'hover',
        checkStrictly: true,
        emitPath: false
      },
    }
  },
  mounted() {
    this.initEditData()
  },
  methods: {
    // 选择菜单图片
    addIcon() {
      const _this = this
      _this.$modalIcon(function (icon) {
        _this.editPram.icon = icon
      })
    },
    close() {
      this.$emit('hideEditDialog')
    },
    //修改下拉控件事件
    selectChange(value){
      console.log(value)
      value==2?this.editPram.status=0:this.editPram.status=1;
    },
    initEditData() {
      if (this.isCreate === 1) {
        this.editPram = this.editData
      } else {
        this.editPram.pid = this.prent.id
      }
      this.editPram.belong = this.type
      addTreeListdisabled(this.allTreeList, 'children', 'id', this.editPram.id, 'pid')

    },
    addTreeListLabelForCasCard(arr, child) {
      arr.forEach((o, i) => {
        if (o.child && o.child.length) {
          // o.disabled = true
          o.child.forEach((j) => {
            j.disabled = true
          })
        }
      })
    },
    handlerSubmit(formName) {
      this.editPram.type!==2?this.editPram.component='':null;
      this.$refs[formName].validate((valid) => {
        if (!valid) return
        this.loading = true
        if (this.isCreate === 0) {
          //添加
          permissionSave(this.editPram).then(res => {
            console.log(res)
            this.$emit('hideEditDialog')
            this.$message.success('创建目录成功')
            this.loading = false
          }).catch((err) => {
            this.loading = false
            //this.loading = false
            this.$message.error(err.msg)
          })

        } else {
          //编辑
          this.editPram.pid = Array.isArray(this.editPram.pid) ? this.editPram.pid[0] : this.editPram.pid
          this.loading = true
          permissionUpdate(this.editPram).then(res => {
            console.log(res)
            this.$emit('hideEditDialog')
            this.$message.success('更新目录成功')
            this.loading = false
          }).catch((err) => {
            this.loading = false
            this.$message.error(err.msg)
          })

        }
      })
    },
  }
}
</script>

<style scoped>

</style>
